<template>
  <div class="login-container flex">
    <div class="login-left">
      <div class="login-left-logo">
        <IconLogo />
        <div class="login-left-logo-text">
          <span>{{ themeConfig.globalViceTitle }}</span>
          <span class="login-left-logo-text-msg">{{ themeConfig.globalViceTitleMsg }}</span>
        </div>
      </div>
      <div class="login-left-img">
        <LoginMain />
      </div>
      <LoginBg class="login-left-ripple"></LoginBg>
    </div>
    <div class="login-right flex">
      <div class="login-right-warp flex-margin">
        <span class="login-right-warp-one"></span>
        <span class="login-right-warp-two"></span>
        <div class="login-right-warp-mian">
          <div class="login-right-warp-main-title">{{ themeConfig.globalTitle }} 欢迎您！</div>
          <div class="login-right-warp-main-form">
            <div v-if="!state.isScan">
              <el-tabs v-model="state.tabsActiveName">
                <el-tab-pane :label="$t('message.label.one1')" name="account">
                  <Account />
                </el-tab-pane>
                <!-- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
                  <Mobile />
                </el-tab-pane> -->
              </el-tabs>
            </div>
            <Scan v-if="state.isScan" />
            <div class="login-content-main-sacn" @click="state.isScan = !state.isScan">
              <i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
              <div class="login-content-main-sacn-delta"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, reactive } from 'vue'
import { NextLoading } from '@/utils/loading'
import { themeConfig } from '@/storage'
import LoginMain from '@/components/svgIcon/LoginMain.vue'
import IconLogo from '@/components/svgIcon/IconLogo.vue'
import LoginBg from '@/components/svgIcon/LoginBg.vue'

// 引入组件
const Account = defineAsyncComponent(() => import('@/views/login/component/LoginAccount.vue'))
// const Mobile = defineAsyncComponent(() => import('@/views/login/component/LoginMobile.vue'))
const Scan = defineAsyncComponent(() => import('@/views/login/component/LoginScan.vue'))

// 定义变量内容
const state = reactive({
  tabsActiveName: 'account',
  isScan: false
})

// 页面加载时
onMounted(() => {
  NextLoading.done()
})
</script>

<style scoped>
@import 'loginIndex.css';
</style>
